<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="./css/public.css"/>
		<link rel="stylesheet" type="text/css" href="./css/order.css"/>
	</head>
	<body>
		<%- include('./header.html')%>
		<div class="main">
			<div class="progress">
				<span class="on"><i>1</i>确认订单</span><s></s>
				<span><i>2</i>提交订单</span><s></s>
				<span><i>3</i>支付完成</span>
			</div>
			<div class="table-head">
				<span class="s1">课程信息</span>
				<span class="s2">优惠券</span>
				<span class="s3">金额/元</span>
				<span class="s4">编辑</span>
			</div>
			<div class="table-body">
				<div class="item">
					<div class="item-type"><label><input type="checkbox"> 二级建造师</label></div>
					<div class="item-wrap clearfix">
						<div class="item-info">
							<img src="img/order_pic.jpg" />
							<p>2021二级建造师基础分学习班-全科</p>
							<p>一级建造师 | 王祯等 | 30.00h</p>
							<p>有效期：2022-12-31</p>
						</div>
						<div class="item-djq">-￥50</div>
						<div class="item-price">￥1699.00</div>
						<div class="item-edit">
							<a href="javascript:;">删除</a>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="item-type"><label><input type="checkbox"> 二级建造师</label></div>
					<div class="item-wrap clearfix">
						<div class="item-info">
							<img src="img/order_pic.jpg" />
							<p>2021二级建造师基础分学习班-全科</p>
							<p>一级建造师 | 王祯等 | 30.00h</p>
							<p>有效期：2022-12-31</p>
						</div>
						<div class="item-djq">-￥50</div>
						<div class="item-price">￥1699.00</div>
						<div class="item-edit">
							<a href="javascript:;">删除</a>
						</div>
					</div>
				</div>
			</div>
			<div class="table-foot">
				<label><input id="checkAll" type="checkbox"> 全选</label>
				<p>
					商品总价：￥1699 丨
					商品数量：1件 丨
					优惠金额：-￥50 
				</p>
			</div>
			<div class="tools clearfix">
				<div class="address-info">
					<div><a id="btn-dzAdd" href="javascript:;"><img src="img/order_icon01.png"> 添加新地址</a></div>
					<p>利达 13333333333 <a id="btn-changeAdd" href="javascript:;"><img src="img/order_icon02.png"> 修改</a></p>
					<p>寄送至：内蒙古赤峰市松山区振兴街道天王商务A座1808室 <span>默认</span></p>
				</div>
				<div class="order-info">
					<p>应付总额：<span>￥1649.00</span></p>
					<a href="javascript:;">提交订单</a>
				</div>
			</div>
		</div>
		
		<div class="mask"></div>
		<div class="pop">
			<h2>添加收货地址<a href="javascript:;">×</a></h2>
			<form>
				<p>真实姓名：<input type="text" placeholder="收货人"></p>
				<p>联系方式：<input type="text" placeholder="收货人联系方式" maxlength="11"></p>
				<p>所在地区：<select id="area-province"><option>选择省市区</option></select></p>
				<p class="acity"><select style="margin-left:70px" id="area-city"></select></p>
				<p class="acounty"><select style="margin-left:70px" id="area-county"></select></p>
				<p>详细地址：<input type="text" placeholder="填写详细街道小区等信息"></p>
				<p>设置默认：<label><input type="checkbox"> 已设置为默认地址</label></p>
			</form>
			<div class="pop-foot">
				<a class="pop-submit" href="javascript:;">提交</a>
				<a class="pop-cancel" href="javascript:;">取消</a>
			</div>
		</div>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/china-area-data.js"></script>
	<script>
		//删除商品
		$(".table-body").on("click",".item-edit", function (){
			$(this).parents(".item").remove();
		});
		
		//全选商品
		$("#checkAll").click(function (){
			if($(this).prop("checked")){
				$(".table-body .item").find(".item-type input").prop("checked",true);
			}else{
				$(".table-body .item").find(".item-type input").prop("checked",false);
			}
		});
		
		//省份加载
		//console.log(AreaData["86"])
		var provinceHtml = '';
		for(i in AreaData["86"]){
			var optionHtml = '<option value="'+i+'">'+ AreaData["86"][i] +'</option>';
			provinceHtml += optionHtml;
		}
		$("#area-province").append(provinceHtml);
		
		//省份选择加载城市
		$("#area-province").change(function(){
			var id = $(this).val();
			$(".acity").show();
			$(".acounty").hide();
			$("#area-county").html('');
			var cityHtml = '';
			for(i in AreaData[id]){
				//判断是否是直辖市
				if(AreaData[id][i] == "市辖区"){
					var id = i;
					$(".acity").hide();
					$(".acounty").show();
					var countyHtml = '';
					console.log(AreaData[id])
					for(i in AreaData[id]){
						var optionHtml = '<option value="'+i+'">'+ AreaData[id][i] +'</option>';
						countyHtml += optionHtml;
					}
					$("#area-county").html(countyHtml);
					return false;
				}
				
				var optionHtml = '<option value="'+i+'">'+ AreaData[id][i] +'</option>';
				cityHtml += optionHtml;
			}
			$("#area-city").html(cityHtml);
		});
		
		//城市选择加载区县
		$("#area-city").change(function(){
			var id = $(this).val();
			$(".acounty").show();
			var countyHtml = '';
			for(i in AreaData[id]){
				var optionHtml = '<option value="'+i+'">'+ AreaData[id][i] +'</option>';
				countyHtml += optionHtml;
			}
			$("#area-county").html(countyHtml);
		});
		
		//增加地址
		$("#btn-dzAdd").click(function (){
			$(".mask,.pop").fadeIn();
		})
		
		//关闭地址
		$(".pop h2 a").click(function (){
			$(".mask,.pop").fadeOut();
		})
		
		//修改地址
		$("#btn-changeAdd").click(function (){
			$(".mask,.pop").fadeIn();
		})
	</script>
	</body>
</html>
